<template>
    <div class="page" data-page="mine" style="z-index: 2;">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left" @click=$root.backToTab()>
                    <a class="link">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div class="title">单位信息</div>
            </div>
            <div class="subnavbar line-subnavbar">
                <div class="searchbar searchbar-init" onsubmit="return false;">
                  <div class="searchbar-inner">
                    <div class="searchbar-input-wrap unitPopup-search ">
                      <input type="search" id="unitSearchPopup" placeholder="请输入关键字">
                      <i class="searchbar-icon"></i>
                      <span @click="clearsearch" class="input-clear-button"></span>
                    </div>
                    <span @click="clearsearch" class="searchbar-disable-button">Cancel</span>
                  </div>
                </div>
            </div>
        </div>
        <div data-infinite-distance="50" class="page-content layer2D-content infinite-scroll-content" @infinite="loadMore">
            <div class="list media-list no-hairlines">
                <ul id="unitList">

                </ul>
            </div>
            <div class="preloader infinite-scroll-preloader" id="unitlist_preloader"></div>
        </div>
    </div>
</template>
<style scoped>
    .myrow {
        margin-left: 25px;
        margin-right: 25px;
    }

    .mySelect {
        position: absolute;
        width: 20%;
        height: 48px;
        margin: 0px 0px;
        top: 100%;
        background-color: #fff;
        padding-left: 0px;
    }
    .item-after {
        width: 45%;
        max-width: 80%;
        font-size: 16px;
    }
    .title{
        padding-right: 56px;
        margin: 0px auto;
    }
    .list{
        margin: 0;
    }
    .unit-name{
        font-size: 14px;
        color: #333333;
    }
    .md .list .item-text{
        margin-top: 3px;
        font-size: 12px;
        color: #666666;
    }
</style>
<script>
    return {
        mounted() {
            var self = this;
            self.getUnitList();
        },
        data: function () {
            return {
                name:'',
                areaId:0,
                provinceId:0,
                pageIndex:0,
                pageSize:25,
                unitType:"", //1单 //2多
                currentOrgId:this.$route.params.organizationIds,
                isNoLoadMore:true,
            }
        },
        methods: {
            loadMore:function(){
                if (this.isNoLoadMore) {
                    this.pageIndex++;
                    this.getUnitList();
                }
            },
            getUnitList: function () {
                var self = this;
                common.loading(1);
                Dao.unitList({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    orgIds:userInfor.organizationIds,
                    queryType:1,
                    areaId:self.areaId,
                    provinceId:self.provinceId,
                    pageIndex:self.pageIndex,
                    pageSize:self.pageSize,
                    name:self.name,
                },function(data){
                    common.loading(0);
                    if (data&&data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            $("#unitList").append('<li style="height: 70px;">' +
                                '                        <a href="/unitInfo/'+data[i].organizationId +'/' +'" class="item-link item-content" data-view=".view-main">' +
                                '                            <div class="item-media">' +
                                '                                <img style="margin-top: 3px;" src="' + common.transNullundefined(data[i].logoUrl) + '" width="39"/>' +
                                '                            </div>' +
                                '                            <div class="item-inner">' +
                                '                                <div class="item-title-row">' +
                                '                                    <div class="item-title unit-name">' + common.transNullundefinedToline(data[i].shortName) + '</div>' +
                                '                                </div>' +
                                '                                <div class="item-text">' + common.transNullundefinedToline(data[i].address) +
                                '                                </div>' +
                                '                            </div>' +
                                '                        </a>' +
                                '                    </li>');
                        }
                    } else {
                        $("#unitList").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                    }
                    if (data.length < self.pageSize){
                        self.isNoLoadMore = false;
                        $("#unitlist_preloader").hide();
                    }

                });
            },

            clearsearch:function(){
                var self = this;
                self.name = '';
                $("#unitList").empty();
                self.pageIndex = 0;
                self.getUnitList();
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                getAreaData('areaPopup','areaName',function(data) {
                    self.areaId = data.areaId;
                    self.provinceId = data.provinceId;
                    $("#unitList").empty();
                    self.pageIndex = 0;
                    self.getUnitList();
                });
                $("#areaPopup").click(function(e) {
                    pickerCustomToolbar.open();
                });
                jQuery("#unitSearchPopup").keypress(function(event) {
                    if (event.which == 13) {
                        self.name = $("#unitSearchPopup")[0].value;
                        self.pageIndex = 0;
                        $("#unitList").empty();
                        self.getUnitList();
                        $("#unitSearchPopup").blur();
                    };
                });
            }
        },
    }
</script>